<script>
  let name = 'Svelte'
</script>

<div class="hello-world">
  <h2>Hello {name}!</h2>
  <p>这是一个简单的 Svelte 组件示例。</p>
  
  <input 
    bind:value={name} 
    placeholder="输入你的名字"
  />
</div>

<style>
  .hello-world {
    background: #f5f5f5;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
  }
  
  h2 {
    color: #333;
    margin-bottom: 1rem;
  }
  
  p {
    color: #666;
    margin-bottom: 1rem;
  }
  
  input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
  }
</style>
